export class Pencil {
  onBegin(point) {
    this.onMove(null, point);
  }

  /**具体画图方式：点击、移动时执行
   * @param {object} from - 起始位置
   * @param {object} to - 目标位置
   * */
  onMove(from, to) {
    const o = this.option;
    const pxWidth = o.pxWidth;
    const ctx = this.ctx;
    ctx.beginPath();
    ctx.strokeStyle = o.foregroundColor;
    ctx.fillStyle = o.foregroundColor;
    // 第一种方式：画线
    // this.ctx.lineWidth = this.global.lineWidth;
    // this.ctx.moveTo(from.x, from.y);
    // this.ctx.lineTo(to.x, to.y);
    // this.ctx.lineJoin = "round";
    // this.ctx.lineJoin = "bevel";

    // 第二种方式：画圆
    ctx.arc(to.x, to.y, pxWidth, 0, 2 * Math.PI);
    ctx.fill();
    if (!!from) {
      var x1 = from.x;
      var x2 = to.x;
      var y1 = from.y;
      var y2 = to.y;
      var asin = pxWidth * Math.sin(Math.atan((y2 - y1) / (x2 - x1)));
      var acos = pxWidth * Math.cos(Math.atan((y2 - y1) / (x2 - x1)));
      var x3 = x1 + asin;
      var y3 = y1 - acos;
      var x4 = x1 - asin;
      var y4 = y1 + acos;
      var x5 = x2 + asin;
      var y5 = y2 - acos;
      var x6 = x2 - asin;
      var y6 = y2 + acos;
      ctx.moveTo(x3, y3);
      ctx.lineTo(x5, y5);
      ctx.lineTo(x6, y6);
      ctx.lineTo(x4, y4);
      ctx.fill();
    }
    ctx.stroke();
    ctx.closePath();
  }
}